<div id="tb<?php echo $uniqid;?>" class="easyui-panel" style="padding:5px">
  <table class="datagrid-toolbar" cellspacing="0" cellpadding="0" style="padding:5px 10px !important; background: none; border-bottom:none;">
    <tbody>
      <tr>
        <td colspan="3" style="padding-bottom: 5px;">
          <a href="javascript:void(0);" onclick="upgradecodeAdd();" class="l-btn l-btn-small l-btn-plain"><span
                  class="l-btn-left l-btn-icon-left"><i class="iconfont icon-tianjia1"></i><span class="l-btn-text">生成新升级码</span></span></a>
        </td>
      </tr>
      <tr>
        <td colspan="3" style="padding-bottom: 5px;">
          <div style="float: left">
            <span style="color: #3e3e3e; font-weight: bold;">升级码状态：</span>
            <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='all'?'selected':''"
                  @click="filter('all')"><span class="l-btn-text">全部</span></span>
            <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='unused'?'selected':''"
                  @click="filter('unused')"><span class="l-btn-text">未使用</span></span>
            <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='used'?'selected':''"
                  @click="filter('used')"><span class="l-btn-text">已使用</span></span>
            <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='disabed'?'selected':''"
                  @click="filter('disabed')"><span class="l-btn-text">已禁用</span></span>
          </div>
          <div class="datagrid-btn-separator" style="margin-left: 10px; margin-right: 10px;"></div>
          <div style="float: left">
            <span style="color: #3e3e3e; font-weight: bold;">升级码对应等级：</span>
            <span class="l-btn l-btn-small l-btn-plain" :class="params.level==0?'selected':''"
                  @click="levelFilter(0)"><span class="l-btn-text">全部等级</span></span>
            <template v-for="item in levelList">
            <span class="l-btn l-btn-small l-btn-plain" :class="params.level==item.level?'selected':''"
                @click="levelFilter(item.level)"><span class="l-btn-text">{{item.name}}</span></span>
            </template>
          </div>
          <div style="clear: both;"></div>
        </td>
      </tr>
      <tr>
        <td style="padding: 0 10px;"><span style="line-height:30px;">发放日期：</span>
          <input id="upgradecodeStartOn" v-model="params.upgradecode_start" style="width:110px" type="text"
                 class="easyui-datebox"> </input>至
          <input id="upgradecodeEndOn" v-model="params.upgradecode_end" style="width:110px" type="text"
                 class="easyui-datebox"> </input>
        </td>
        <td style="padding: 0 10px;">
          <select v-model="params.keywordsType" class="forminput inputstyle textbox-text validatebox-text" @change="keywordsTypeChange" style="width:120px; border-color: #cccccc !important;">
            <option value="code_id">升级码ID</option>
            <option value="code_sn">升级码卡密</option>
            <option value="a_user_id">持卡用户ID</option>
            <option value="a_user_phone">持卡用户手机号</option>
            <option value="b_user_id">使用用户ID</option>
            <option value="b_user_phone">使用用户手机号</option>
          </select>
          <input v-model="params.keywords" placeholder="请输入内容" @keyup.enter="init"
                              class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox keywords_input_search_box"
                              type="text"> </input>
        </td>
        <td>
          <a href="javascript:void(0);" @click="init" class="l-btn l-btn-small l-btn-plain"><span
                class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
                class="l-btn-text">查询</span></span></a>
          <a href="javascript:void(0);" @click="reset" class="l-btn l-btn-small l-btn-plain"><span
                  class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxinrefresh39"></i><span
                  class="l-btn-text">重置</span></span></a>
          <a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
                  class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
                  class="l-btn-text">重载</span></span></a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div class="con"  style="-moz-user-select:none;">
  <table id="upgradecode"></table>
</div>
<div id="upgradecodedlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>
<script>
  var upgradecodeVm = new Vue({
    el: '#tb<?php echo $uniqid;?>',
    data: {
      levelList:JSON.parse('<?php echo addslashes($level_list);?>'),
      params: {
        upgradecode_start: '',
        upgradecode_end: '',
        keywords: '',
        keywordsType:'code_id',
        mode:'all',
        level:0,
      },
      defParams: {
        upgradecode_start: '',
        upgradecode_end: '',
        keywords: '',
        keywordsType:'code_id',
        mode:'all',
        level:0,
      },
      initLoad:false,
    },
    filters: {
      formatDate(nS){
        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
      }
    },
    mounted() {
      setTimeout(()=>{
        this.mounted();
      }, 200);
    },
    methods: {
      mounted: function (){
        $('#tb<?php echo $uniqid;?> #upgradecodeStartOn').datebox('setValue', this.params.upgradecode_start);
        $('#tb<?php echo $uniqid;?> #upgradecodeEndOn').datebox('setValue', this.params.upgradecode_end);
        this.init();
      },
      init: function () {
        this.params.upgradecode_start = $('#tb<?php echo $uniqid;?> #upgradecodeStartOn').datebox('getValue');
        this.params.upgradecode_end = $('#tb<?php echo $uniqid;?> #upgradecodeEndOn').datebox('getValue');
        if(this.params.keywordsType === 'a_user_phone'|| this.params.keywordsType === 'b_user_phone'){
          if(this.params.keywords.length > 0 && this.params.keywords.length < 4){
            $('#tb<?php echo $uniqid;?> .keywords_input_search_box').focus().tooltip({
              position: 'top',
              content: '<span style="color:#ff0000">查询时，用户手机号不能少于4位数！</span>',
            });
            return false;
          }
        }
        upgradecodeReload();
      },
      filter(mode) {
        this.params.mode = mode;
        this.init();
      },
      levelFilter(level){
        this.params.level = level;
        this.init();
      },
      keywordsTypeChange: function (e){
        let placeholder = '请输入内容';
        if(this.params.keywordsType === 'a_user_phone' || this.params.keywordsType === 'b_user_phone'){
          placeholder = '用户手机号不能少于4位数';
        }
        $('#tb<?php echo $uniqid;?> .keywords_input_search_box').attr('placeholder',placeholder);
      },
      reset:function (){
        this.params = JSON.parse(JSON.stringify(this.defParams));
        this.mounted();
      }
    }
  });
  var upgradecodeAdd = function () {
    $("#upgradecodedlg").dialog({
      title: '新增升级码',
      closed: false,
      width: 740,
      height: 420,
      cache: false,
      href: '/admin/upgradecode/add',
      modal: true,
      buttons: [{
        text: '保存',
        id: 'upgradecodesubmit',
        iconCls: 'icon-ok',
      }, {
        text: '取消',
        iconCls: 'icon-no',
        handler: function () {
          $("#upgradecodedlg").dialog('close');
        }
      }]
    });
  }
  var upgradecodeChangeLevel = function (id, level) {
    $("#upgradecodedlg").dialog({
      title: '修改目标代理等级',
      closed: false,
      width: 540,
      height: 550,
      href: '/admin/upgradecode/level?curr=' + level + '&id=' + id,
      cache: false,
      modal: true,
      buttons: [{
        text: '保存',
        id: 'upgradecodeLevelsubmit',
        iconCls: 'icon-ok',
      }, {
        text: '取消',
        iconCls: 'icon-no',
        handler: function () {
          $("#upgradecodedlg").dialog('close');
        }
      }]
    });
  }
  var upgradecodeDisable = function (row_id) {
    if (row_id){
      $.messager.confirm('提示', '<span style="color: #0544a3; font-weight: bold; font-size: 1.1em;">确定要切换升级码的状态？</span>', function (r) {
        if (r) {
          $.messager.progress();
          $.post('/admin/upgradecode/disablecode', {id: row_id}, function (data) {
            $.messager.progress('close');
            if (data.ret === 0) {
              $.messager.show({
                title: '提示',
                msg: data.msg,
                timeout: 3000,
                showType: 'slide'
              });
              upgradecodeReload();
            } else {
              $.messager.alert('出错', data.msg, 'error');
            }
          }, 'json');
        }
      });
    }else{
      $.messager.alert('提示','请先选择要切换的升级码！','warning');
    }
  };


  var upgradecodeDelete = function (id) {
    let row_id = id || $('#upgradecode').datagrid('getSelected').id;
    if (row_id){
      $.messager.confirm('提示', '<span style="color: #d51313; font-weight: bold; font-size: 1.1em;">确定要删除升级码吗？</span>', function (r) {
        if (r) {
          $.messager.progress();
          $.post('/admin/upgradecode/delete', {id: row_id}, function (data) {
            $.messager.progress('close');
            if (data.ret === 0) {
              $.messager.show({
                title: '提示',
                msg: data.msg,
                timeout: 3000,
                showType: 'slide'
              });
              upgradecodeReload();
            } else {
              $.messager.alert('出错', data.msg, 'error');
            }
          }, 'json');
        }
      });
    }else{
      $.messager.alert('提示','请先选择要冻结的卡！','warning');
    }
  };
  
  var upgradecodeReload = function () {
    if(upgradecodeVm.initLoad){
      upgradecodeVm.initLoad = false;
    }else{
      $("#upgradecode").datagrid('load', upgradecodeVm.params);
    }
  };

  var upgradecodeSearch = function () {
    var height = $(window).height() - $(".top").height() - 46;
    var width = $(window).width() - $(".leftmenu").width() - 8;
    $("#upgradecode").datagrid({
      title: '升级码管理',
      width: width,
      height: height,//高度
      singleSelect: true,//如果为true，则只允许选择一行
      striped: true,//是否显示斑马线效果。
      rownumbers: false,//如果为true，则显示一个行号列。
      pagination: true,//是否显示分页
      pageSize: 10,
      pageList: [10, 20, 50, 100],
      method: 'post',
      sortName: 'created_at',
      sortOrder: 'desc',
      idField: 'id',
      url: '/admin/upgradecode/index',
      queryParams: upgradecodeVm.params,
      fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
      nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
      selectOnCheck: false,
      checkOnSelect: true,
      loadMsg:'正在处理，请稍后。。。',
      toolbar: '#tb<?php echo $uniqid;?>',
      columns: [[
        {field:'id',title:'ID', width: fixWidth(3), align: "center", halign: 'center'},
        {field:'code',title:'升级码卡密', width: fixWidth(8), align: "center", halign: 'center'},
        {field:'level_info',title:'目标等级', width: fixWidth(8), align: "center", halign: 'center',formatter:function (value,rowData,rowIndex){
            return value.name;
          }},
        {field:'relation_member',title:'持码的用户', width: fixWidth(15), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
            let content = '';
            if(value){
              if(value.avatar){
                content += '<div style="display: flex" class="touxiang_wenzi">';
                content += '<div style="width: 32px; display: flex; align-items: center;"><img style="width: 30px; height: 30px; border-radius: 50%; border:1px solid #eee; overflow: hidden;" src="'+value.avatar+'"></div>';
                content += '<div style="width: calc(100% - 42px); padding-left: 10px;">';
              }else{
                content += '<div class="touxiang_wenzi">';
              }
              content += '用户ID：<span>'+rowData.member_id_relation+'</span><br>';
              if(value.realname){
                content += '昵称(姓名)：<span>'+value.nickname+'('+value.realname+')</span><br>';
              }else{
                content += '昵称：<span>'+value.nickname+'</span><br>';
              }
              content += '手机号：<span>'+value.phone+'</span>';
              if(value.avatar){content += '</div>';}
              content += '</div>';
            }else{
              content = '用户不存在';
            }
            return content;
          }},
        {field:'use_member',title:'使用用户', width: fixWidth(15), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
            let content = '';
            if(rowData.status === 'used'){
              if(value){
                if(value.avatar){
                  content += '<div style="display: flex" class="touxiang_wenzi">';
                  content += '<div style="width: 32px; display: flex; align-items: center;"><img style="width: 30px; height: 30px; border-radius: 50%; border:1px solid #eee; overflow: hidden;" src="'+value.avatar+'"></div>';
                  content += '<div style="width: calc(100% - 42px); padding-left: 10px;">';
                }else{
                  content += '<div class="touxiang_wenzi">';
                }
                content += '用户ID：<span>'+rowData.member_id_use+'</span><br>';
                if(value.realname){
                  content += '昵称(姓名)：<span>'+value.nickname+'('+value.realname+')</span><br>';
                }else{
                  content += '昵称：<span>'+value.nickname+'</span><br>';
                }
                content += '手机号：<span>'+value.phone+'</span>';
                if(value.avatar){content += '</div>';}
                content += '</div>';
              }else{
                content = '用户不存在';
              }
            }else if(rowData.status === 'disabed'){
              content = '禁用码，无法使用';
            }else{
              content = '待使用';
            }
            return content;
          }},
        {field:'status',title:'状态', width: fixWidth(10), align: "center", halign: 'center',formatter:function (value,rowData,rowIndex){
            let content = '<span class="status_'+value+'">'+rowData.status_text+'</span>';
            if(value === 'used'){
              content += '<div style="width:100%; text-align: left; white-space: pre-wrap;">使用时间：'+rowData.time_use+'</div>'
            }
            return content;
          }},
        {field:'time_release',title:'发放时间', width: fixWidth(8), align: "center", halign: 'center',formatter:function (value,rowData,rowIndex){
            return value?value:'--';
          }},
        {field: 'options', title: '操作', width: fixWidth(10), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex) {
            let buttons = '<div class="table">';
            if(rowData.status === 'unused'){
              buttons += '<span class="l-btn l-btn-small color9 table" style="margin-right: 5px;" onclick="upgradecodeDisable(\'' + rowData.id + '\')"><span class="l-btn-text" style="color: #a10303' +
                      '">禁用</span></span>';
              buttons += '<span class="l-btn l-btn-small color9 table" style="margin-right: 5px;" onclick="upgradecodeChangeLevel(\'' + rowData.id + '\',\'' + rowData.level + '\')"><span class="l-btn-text" >更换目标等级</span></span>';
            }
            if(rowData.status === 'disabed'){
              buttons += '<span class="l-btn l-btn-small color9 table" style="margin-right: 5px;" onclick="upgradecodeDisable(\'' + rowData.id + '\')"><span class="l-btn-text" style="color: #168702' +
                      '">启用</span></span>';
              buttons += '<span class="l-btn l-btn-small color9 table" style="margin-right: 5px;" onclick="upgradecodeDelete(\'' + rowData.id + '\')"><span class="l-btn-text">删除</span></span>';
            }

            return buttons + '</div>';
          }},
      ]],
    });
    upgradecodeVm.initLoad = true;
  };
  onDatagridResize("#upgradecode");
  upgradecodeSearch();
</script>
<style>
  .status_used{
    color: #c24e01;
  }

  .status_unused{
    color: #00972e;
  }

  .status_disabed{
    color: #111111;
  }

  .l-btn-plain{
    border: rgba(0,0,0,0) 1px solid;
  }

  .datagrid-body-row td{
    line-height: 1.8em !important;
  }

  .datagrid-row td{
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.8em !important;
  }

  .datagrid-toolbar .selected {
    color: #f1f1f1;
    background: #1065a7;
    border: 1px solid #f0f0f0;
  }

  .touxiang_wenzi span{
    color: #007293;
  }

  .keywords_input_search_box{
    width: 300px;
    border-color: #cccccc;
  }
</style>
